<!-- 48 -->
<template>
  <div class="page-wrap">
    <div class="data-form" style="margin-bottom: 20px">
       <a-form
          ref="queryForm"
          layout="inline"
          :colon="false"
          :rules="rules4"
          :model="queryForm"
        >
        <a-form-item :label="$t('T9_shopId')" name="shopId" prop="shopId">
          <a-select class="t9-form-wideget-input-default" v-model:value="queryForm.shopId" allow-clear @change="getMaskSpec"  :placeholder="$t('common_pleaseSelect')">
            <a-select-option value="ARRAY">ARRAY</a-select-option>
            <a-select-option value="CF">CF</a-select-option>
          </a-select>
        </a-form-item>
        </a-form>
    </div>
    <div class="data-form" style="margin-bottom: 20px">
      <a-form
          ref="dataForm"
          layout="inline"
          :colon="false"
          :rules="rules"
          :model="dataForm"
        >
        <a-row :gutter="[16,0]" justify="space-between" align="middle" style="flex: 1">
          <a-col :span="6">
             <a-form-item :label="$t('T9_maskName')" name="maskName">
            <a-input class="t9-form-wideget-input-default" v-model:value="dataForm.maskName" allow-clear :placeholder="$t('common_pleaseEnter1')" />
          </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-button class="t9-form-wideget-btn-default" type="primary" @click="getMaskList" >{{ $t('T9_generate') }}</a-button>
          </a-col>
        </a-row>
        </a-form>
    </div>
     <div class="data-form mt1">
      <a-form
          ref="form"
          layout="inline"
          :colon="false"
          :rules="rules2"
          :model="form"
        >
        <a-row :gutter="[16,0]"  justify="space-between" align="middle" style="flex:1">
          <a-col :span="6">
             <a-form-item :label="$t('T9_maskSpec')" name="maskSpec">
             <a-select class="t9-form-wideget-input-default" @change="changeMaskSpec" v-model:value="form.maskSpec" allow-clear show-search  :placeholder="$t('common_pleaseSelect')">
           <a-select-option v-for="item in maskSpecArr"
            :key="item.maskSpec" :value="item.maskSpec" :ver="item.maskSpecVersion">
            {{item.maskSpec}}
            </a-select-option>
          </a-select>
          </a-form-item>
          </a-col>
           <a-col :span="6">
             <a-form-item :label="$t('T9_maskSuffix')" name="maskSuffix">
            <a-input class="t9-form-wideget-input-default" v-model:value="form.maskSuffix"  allow-clear :placeholder="$t('common_pleaseEnter1')" />
          </a-form-item>
          </a-col>
          <a-col :span="8"></a-col>
           <a-col :span="4">
            <a-button class="t9-form-wideget-btn-default" @click="getMaskList2" type="primary">{{ $t('T9_generate') }}</a-button>
          </a-col>
        </a-row>
        </a-form>
    </div>
      <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-1">
        <a-col :span="15" class="global-oper-row-title">{{ $t('T9_maskList') }}</a-col>
        <a-col :span="8" class="global-oper-row-extra">
          <a-button class="t9-form-wideget-btn-default" type="primary">{{ $t('T9_toExcel') }}</a-button>
        </a-col>
      </a-row>
      <div class="page-wrap-table">
        <t-table align="center"
          ref="table"
          :data="list.tableData"
          max-height="100%"
          :loading="searchBtnLoading"
          @radio-change="handleCheckChange"
        >
          <t-column type="checkbox" width="50"></t-column>
          <t-column min-width="100" field="maskName" :title="$t('T9_maskName')" />
          <t-column min-width="100" field="maskSpec" :title="$t('T9_maskSpec')" />
          <t-column min-width="100" field="ver" :title="$t('T9_ver')" />
          <t-column min-width="100" field="timeUsedLimit" :title="$t('T9_timeUsedLimit')" />
          <t-column min-width="100" field="createUser" :title="$t('T9_createUser')" />
          <t-column min-width="100" field="createTime" :title="$t('T9_createTime')" />
        </t-table>
      </div>
      <div class='data-form page-wrap-bottom mt-1'>
        <a-form
          ref="confirmForm"
          layout="inline"
          :colon="false"
          :model="confirm"
          :rules="rules3"
        >
       <a-form-item :label="$t('T9_comment')" name="eventComment" prop="eventComment" style="width:100%">
            <a-row type="flex" justify="space-between" align="middle">
              <a-col :span="19">
                <a-textarea allow-clear v-model:value="confirmForm.eventComment" :rows="1" :title="confirmForm.eventComment" />
              </a-col>
              <a-col :span="2">
                <a-button class="t9-form-wideget-btn-default" type="primary" :loading="confirmBtnLoading" @click="handleConfirm">{{ $t('T9_confirm') }}</a-button>
              </a-col>
               <a-col :span="2">
               <a-button class="t9-form-wideget-btn-default" type="primary">{{ $t('T9_remove') }}</a-button>
              </a-col>
            </a-row>
          </a-form-item>
        </a-form>
      </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

  import * as api from '@/api/common'
  import initOptionsMixin from '@/mixins/initOptionsMixin'
  import { getCurrentDate } from '@/utils/utils'

  export default defineComponent({
    name: 'CreateMask',
    mixins: [initOptionsMixin],
    data() {
      return {
        searchBtnLoading: false,
        list: {
          tableData: [
          ]
        },
        tableList: [],
        ver: '',
        maskSpecArr: [],
        queryForm: {
          shopId: undefined
        },
        form: {
          maskSpec: undefined,
          maskSuffix: undefined
        },
        confirmForm: {
          eventComment: undefined
        },
        options: {
        },
        dataForm: {
          maskName: undefined
        },
        rules: {
          maskName: [{ required: true, message: this.$t('valid_required2'), trigger: 'blur' }]
        },
        rules2: {
          maskSpec: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }],
          maskSuffix: [{ required: true, message: this.$t('valid_required2'), trigger: 'blur' }]
        },
        rules3: {
          comment: [{ required: true, message: this.$t('valid_required2'), trigger: 'blur' }]
        },
        rules4: {
          shopId: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }]
        }
      }
    },
    computed: {},
    created() {
    },
    watch: {},
    methods: {
      getMaskSpec(val) {
        const params = {
          shopId: val
        }
        api.getMaskSpec(params).then(res => {
          this.maskSpecArr = res
        })
      },
      changeMaskSpec(val, o) {
        this.ver = o.ver
      },
      getMaskList() {
        this.$refs.dataForm
          .validate()
          .then(() => {
            this.getList(1)
          })
      },
      getMaskList2() {
        this.$refs.form
          .validate()
          .then(() => {
            this.getList(0)
          })
      },
      getList(num) {
        const params = {
                maskName: num ? this.dataForm.maskName : `${this.form.maskSpec}-${this.form.maskSuffix}`,
                maskSpec: this.form.maskSpec,
                ver: this.ver,
                timeUsedLimit: '',
                createUser: '',
                createTime: getCurrentDate(1)
            }
            this.tableList.push(params)
            this.list.tableData = this.tableList
            this.$refs.table.loadData(this.list.tableData)
      }
    }
  })
</script>
<style lang='less' scoped>
.t9-form-wideget-input-default {
  width: 150px;
}
</style>
